<template>
	<view class="content flex_c">
		<view class="steps">
			<view class="title">乐附近上线接单操作流程</view>
			<view class="list_block">
				<view class="num_list flex">
					<text @click="current = 0">第一步</text>
					<text @click="current = 1">第二步</text>
					<text @click="current = 2">第三步</text>
					<text @click="current = 3">第四步</text>
				</view>
			</view>
			<u-steps :list="list" :current="current"></u-steps>
		</view>
		
		
		<view class="detail">
			<swiper :style="`height: ${h}px;`" :current="current" @change="onChange">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="item">
						<scroll-view scroll-y="true">
							<image :src="item.content" mode="widthFix"></image>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				
				h:0,
				
				current:0,
			}
		},
		methods: {
			onChange(e){
				this.current = e.detail.current
			},
			getList(){
				this.request.httpTokenRequest({
					url: "index/getTechnicianAuthStep",
					method: "get"
				}, {
					type:2
				}).then(res => {
					if (res.code == 0) {
						res.data.forEach(item=>{
							this.list.push({
								name:item.title,
								content:item.content,
							})
						})
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
		},
		onLoad() {
			this.getList()
			this.$nextTick(()=>{
				uni.createSelectorQuery().selectAll('.detail').boundingClientRect(data => {
					this.h = data[0].height
				}).exec()
			})
		},
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 30rpx 30rpx 0;
	}
	.steps {
		height: 313rpx;
		background: url(https://qiniu-cdn.maeiyun.com/imgs/technician/index/step_bg.png) 0 0 no-repeat;
		background-size: 100%;
		padding: 28rpx 30rpx 0;
		box-sizing: border-box;
		width: 100%;
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #030404;
			line-height: 45rpx;
		}
		.list_block {
			height: 50rpx;
			margin: 32rpx 0 23rpx;
			position: relative;
			.num_list {
				position: absolute;
				z-index: 10;
				height: 150rpx;
				width: 100%;
				text {
					width: 25%;
					text-align: center;
					font-size: 30rpx;
					color: #060708;
					line-height: 42rpx;
				}
			}
		}
		
	}
	
	.detail {
		width: 100%;
		flex: 1;
		margin-top: 20rpx;
		.item {
			height: 100%;
			scroll-view {
				height: 100%;
			}
			image {
				width: 100%;
			}
		}
	}
</style>
